<template>
  <div class="reactMock" :style="{height:windowH+'px',width:windowW+'px'}">
    <div class="container">
      <c_saleForm2></c_saleForm2>
    </div>
    <div class="mock">
      <img src="../assets/images/moke_frame.png" alt="">
    </div>
    <div class="texture"></div>
  </div>
</template>

<script>

import c_saleForm2 from './saleForm2.vue'

export default {
  data () {
    return {
      windowH: document.documentElement.clientHeight,
      windowW: document.documentElement.clientWidth
    }
  },
  components: {
    c_saleForm2
  },
  methods: {
    watchWindowResize () {
      this.windowH = document.documentElement.clientHeight
      this.windowW = document.documentElement.clientWidth
    }
  },
  mounted () {
    window.onresize = this.watchWindowResize
  }
}
</script>
<style lang='stylus' scoped>
@import '../assets/styles/index.styl';

.reactMock {
  & .texture {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: -10;
    background: url('../assets/images/theme-pattern_5.jpg');
    opacity: 0.3;
  }

  & .mock {
    z-index: -9;
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    & img {
      height: 980px;
      position: relative;
      left: -10px;
      top: 2px;
    }

    @media screen and (min-width: 380px) and (min-height: 820px) {
      display: block;
    }
  }

  & .container {
    height: 100%;
    width: 100%;
    background: #000;
    max-width: 420px;
    max-height: 820px;
    overflow: hidden;
    position: relative;

    @media screen and (min-width: 380px) and (min-height: 820px) {
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      max-width: 385px;
      max-height: 812px;
      border-radius: 50px;
    }
  }
}
</style>